<template>
  <div style="margin-top: 30px">
    <el-button type="primary" @click="useradd">
      新建文章New Article<el-icon class="el-icon--right"
        ><ArrowRight
      /></el-icon>
    </el-button>

    <!--论坛列表-->
    <el-table :data="resterDate" style="width: 100%" height="250">
      <el-table-column fixed prop="id" label="文章序号" width="90" />
      <el-table-column prop="user.name" label="作者" width="80" />
      <el-table-column prop="createTime" label="发布时间" width="180" />
      <el-table-column prop="title" label="标题" width="220" />
      <el-table-column prop="clicknum" label="阅读量" width="120" />
      <el-table-column prop="commenton" label="评论量" width="120" />
      <el-table-column fixed="right" label="操作" width="220">
        <template #default="scope">
          <el-button type="primary" size="small" @click="readnotice(scope.row)"
            >查看</el-button
          >
          <el-button type="warning" size="small" @click="useredit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="delthedate(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--分页-->
  <div style="padding: 10px 0">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-model:currentPage="pageNum"
      :page-sizes="[5, 10, 15]"
      v-model:page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
  <!-- 查看的弹窗 -->
  <el-dialog v-model="dialogVisible" width="50%">
    <h2>{{ form.title }}</h2>
    <br />
    <span style="line-height: 24px">{{ form.content }}</span>
    <br />
    <div style="line-height: 38px">
      <el-row>
        <el-col :span="8">
          <el-tooltip content="阅读量" placement="top" effect="light">
            <span
              ><el-icon><View /></el-icon> {{ form.clicknum }}</span
            >
          </el-tooltip>
          <el-tooltip content="评论量" placement="top" effect="light">
            <span style="margin-left: 10px"
              ><el-icon><ChatDotSquare /></el-icon> {{ form.commenton }}</span
            ></el-tooltip
          >
        </el-col>
        <el-col :span="8"></el-col>
        <el-col :span="2">
          <span>{{ form.user.name }}</span></el-col
        >
        <el-col :span="6">
          <span>{{ new Date(form.createTime).toLocaleString() }}</span></el-col
        >
      </el-row>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 编辑或者添加的弹窗 -->
  <el-dialog title="论坛文章" v-model="dialogFormVisible" width="50%">
    <el-form :model="form" size="default" :rules="rules" ref="form">
      <el-form-item label="标题" label-width="100px" prop="title">
        <el-input v-model="form.title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="文章内容" label-width="100px" prop="content">
        <el-input
          type="textarea"
          autosize
          v-model="form.content"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取消</el-button>
        <el-button type="primary" @click="saveData('form')"> 确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "Order",
  data() {
    return {
      UserDate: [],
      total: 0, //数据总条数
      pageNum: 1, //当前页
      pageSize: 5, //页大小
      dialogVisible: false, //信息弹出框是否展示
      dialogFormVisible: false,
      userid: 0,
      form: {
        id: "",
        userid: "",
        title: "",
        content: "",
      },
      resterDate: [],
      localinfo:
        "https://img1.baidu.com/it/u=1056497728,1432074733&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    };
  },
  methods: {
    handleSizeChange(val) {
      //页大小改变
      this.pageSize = val;
      this.getariticleAll();
    },
    handleCurrentChange(val) {
      //当前页改变
      this.pageNum = val;
      this.getariticleAll();
    },
    getuserDate() {
      //获取当前用户名和头像用*分隔开
      let token = localStorage.getItem("token");
      this.$http
        .post("/inoculations/user/getTokenId", token)
        .then((res) => {
          if (res.statusCode == "200") {
            this.UserDate = res.data;
            this.userid = res.data.idcard;
            this.getariticleAll();
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    //查看
    readnotice(row) {
      this.form = row;
      this.dialogVisible = true;
    },
    // 编辑
    useredit(row) {
      this.form = row;
      this.dialogFormVisible = true;
    },
    // 新建文章
    useradd() {
      (this.form.id = ""),
        (this.form.title = ""),
        (this.form.content = ""),
        (this.form.userid = this.userid);
      this.dialogFormVisible = true;
    },
    // 获取用户论坛文章信息
    getariticleAll() {
      this.$http
        .get("/inoculations/forum/pageall", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            userid: this.userid,
          },
        })
        .then((res) => {
          if (res.statusCode == "200") {
            this.total = res.data.total;
            this.resterDate = res.data.records;
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    //用于数据的添加和更新
    saveData() {
      this.$http
        .post("/inoculations/forum/save", this.form)
        .then((res) => {
          if (res.statusCode == "200") {
            ElMessage({
              message: "成功！",
              type: "success",
            });
            this.dialogFormVisible = false;
            this.getuserDate();
          }
        })
        .catch(() => {
          ElMessage.error("失败！");
        });
    },
    // 删除
    delthedate(id) {
      ElMessageBox.confirm("是否删除选中数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id);
          let token = localStorage.getItem("token");
          this.$http
            .delete("/inoculations/forum/del/" + id, token)
            .then((res) => {
              if (res.statusCode == "200") {
                ElMessage({
                  message: "删除成功！",
                  type: "success",
                });
                this.getuserDate();
              }
            })
            .catch(() => {
              ElMessage.error("删除失败！");
            });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消！",
          });
        });
    },
  },

  created() {
    this.getuserDate();
  },
};
</script>

<style></style>
